<!-- 引入header模板 start -->
<%include("../common/header.html",{'stageArr':["后台管理员管理","新增管理员"]}){}%>

<!-- 引入header模板 start -->
<style type="text/css">
    em.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    .field_notice{display:none;}
    .checking{display:none;}
</style>

<script type="text/javascript">
    function cancel() {
        if (window.confirm("返回管理员列表？")) {
            location.href = "${ctxPath}/user/list";
        }
    }

    $(function(){
    	$("#commentForm").validate({
    		errorPlacement: function(error, element){
    			var error_td = element.next('em');
    			error_td.find('.field_notice').hide();
    			error_td.append(error);
    		},
    		success: function(label){
    			label.addClass('validate_right').text('OK!');
    		},
    		onkeyup: false,
    		rules: {
    			username: {
    				required:true,
    				minlength:3,
    				maxlength:40,
    				remote:{
    					url :'${ctxPath}/user/hasUsername',
    					type:'post',
    					dataType:"json",
    					data:{
    						name : function(){
    							return $('#username').val();
    						}
    					},
    					beforeSend:function(){
    						var _checking = $('#checking');
    						_checking.prev('.field_notice').hide();
    						_checking.next('label').hide();
    						$(_checking).show();
    					},
    					complete :function(){
    						$('#checking').hide();
    					}
    				}
    			},
    			email: {
    			    required: true,
			    	email: true, 
    			    remote:{
    					url :'${ctxPath}/user/hasEmail',
    					type:'post',
    					dataType:"json",
    					data:{
    						name : function(){
    							return $('#email').val();
    						}
    					},
    					beforeSend:function(){
    						var _checking = $('#checkingEmail');
    						_checking.prev('.field_notice').hide();
    						_checking.next('label').hide();
    						$(_checking).show();
    					},
    					complete :function(){
    						$('#checkingEmail').hide();
    					}
    				}
    			},
    			password: {required:true,minlength:6},
    		    repassword: {required:true,equalTo:"#password"},
    		    roleIds: {required:true}
    		},
    		messages: {
    			username: {required:"需要输入名称", minlength:"名称长度在3-40个字符之间", maxlength:"名称长度在3-40个字符之间",remote:"用户名已存在"},
    			email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确", remote:"邮箱名已存在"},
    			password: {required:"密码不能为空！",minlength:jQuery.format("密码位数必须大于等于6个字符！")},
    		    repassword: {required:"确认密码不能为空！",equalTo:"确认密码和密码不一致！"},
    		    roleIds: {required:"角色必须勾选！"}
    		},
    	});
    });
</script>

<form id="commentForm" class="am-form" action="${ctxPath}/user/add" method="post">
    <fieldset>
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">用户名<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
               <input type="text" id="username" name="username" placeholder="输入用户名">
               <em><label class="field_notice"></label><label id="checking" class="checking">检查中...</label></em>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">密码<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
                <input id="password" type="password" name="password" placeholder="输入密码">
                <em><label class="field_notice"></label></em>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">重复密码<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
               <input type="password" name="repassword" placeholder="重复密码">
               <em><label class="field_notice"></label></em>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">邮箱<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
                <input id="email" type="text" name="email" placeholder="输入邮箱">
                <em><label class="field_notice"></label><label id="checkingEmail" class="checking">检查中...</label></em>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">性别<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
               <label class="am-radio-inline"><input type="radio"  value="F" name="gender"> 男</label>
               <label class="am-radio-inline"><input type="radio"  value="M" name="gender">女</label>
               <label class="am-radio-inline"><input type="radio" value="S" name="gender" checked> 保密</label>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm">
            <div class="am-u-sm-2 am-text-right">设置角色<em class="must-em">*</em></div>
            <div class="am-u-sm-4 am-u-end">
                <ul>
                    <% for(role in allRoles){ %>
                        <li><input type="checkbox" value="${role.id}" name="roleIds"/>${role.name}
                        <em><label class="field_notice"></label></em>
                        </li>
                    <% } %>
                </ul>
            </div>
        </div>
        
        <div class="am-g am-margin-top-sm submit-div">
            <button type="submit" class="am-btn am-btn-primary am-btn-sm">
                <i class="am-icon-pencil"></i>&nbsp;&nbsp;&nbsp;添&nbsp;&nbsp;加&nbsp;&nbsp;&nbsp;
            </button>
            <button type="button" class="am-btn am-btn-primary am-btn-sm submit-r" onclick="cancel()">
                <i class="am-icon-undo"></i>&nbsp;&nbsp;&nbsp;返&nbsp;&nbsp;回&nbsp;&nbsp;&nbsp;
            </button>
        </div>
    </fieldset>
</form>


<!-- 引入bottom start -->
<%include("../common/bottom.html"){}%>
<!-- 引入bottom end -->